<template>
  <div class="home">
    <div class="h-280px mb-10px">
      <div class="banner-box">
        <!-- <div class="banner-search">
          <el-input
            placeholder="请输入搜索内容"
            v-model="searchKeyword"
            @keyup.enter.native="handleSearch"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleSearch"
            ></el-button>
          </el-input>
        </div> -->
      </div>
      <!-- 轮播图组件 -->
      <el-carousel
        :interval="5000"
        arrow="hover"
        height="280px"
      >
        <el-carousel-item class="banner-image1">
        </el-carousel-item>
        <el-carousel-item class="banner-image2">
        </el-carousel-item>
        <el-carousel-item class="banner-image1">
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-main class="max-w-1200px mx-auto p-20px">
      <div class="features flex justify-around items-center h-80px text-24px font-bold text-[#5a6ff4]">
        <div class="flex justify-between items-center">
          <img
            src="@/assets/image/report.png"
            alt="icon"
            class="w-24px h-24px"
          />
          <div
            class="ml-5px cursor-pointer"
            @click="onGo(1)"
          >供应产品 {{ productTotal }}个</div>
        </div>
        <div class="flex justify-between items-center">
          <img
            src="@/assets/image/payment.png"
            alt="icon"
            class="w-24px h-24px"
          />
          <div
            class="ml-5px cursor-pointer"
            @click="onGo(2)"
          >发布需求 {{ requirementTotal }}个</div>
        </div>
        <div class="flex justify-between items-center">
          <img
            src="@/assets/image/success.png"
            alt="icon"
            class="w-24px h-24px"
          />
          <div class="ml-5px">完成对接 0项</div>
        </div>
      </div>

      <div class="mt-30px flex items-center justify-start">
        <img
          src="@/assets/image/report.png"
          alt="icon"
          class="w-24px h-24px"
        />
        <h2 class="text-[#142d97] ml-5px">供方市场</h2>
      </div>
      <div class="p-20px bg-white rounded-8px mt-10px">
        <el-row :gutter="30">
          <!-- 左侧区域：发布产品按钮 -->
          <el-col :span="5">
            <div class="pro-bg">
              <el-button
                size="large"
                class="publish-btn"
                @click="handlePublish(1)"
              >
                发布产品
              </el-button>
              <img
                src="@/assets/image/pro-cont.png"
                alt="icon"
                class="pro-cont"
              />
            </div>
          </el-col>

          <!-- 右侧区域：产品分类和需求展示 -->
          <el-col :span="19">
            <!-- 产品分类 -->
            <div class="flex justify-between items-center mb-20px">
              <el-tabs
                v-model="productIndustryId"
                @tab-click="industryTabClick"
                class="custom-tabs"
              >
                <el-tab-pane
                  v-for="category in industrys"
                  :key="category.typeId"
                  :label="category.typeName"
                  :name="category.typeId"
                ></el-tab-pane>
              </el-tabs>
              <div
                class="text-[#5a6ff4] text-14px font-bold cursor-pointer"
                @click="$router.push('/supplier')"
              >更多></div>
            </div>

            <!-- 产品格子 -->
            <div class="mt-20px">
              <el-row :gutter="20">
                <el-col
                  v-for="product in productList"
                  :key="product.id"
                  :span="6"
                  class="mb-10px"
                >
                  <div
                    class="overflow-hidden h-full cursor-pointer"
                    @click="goToProductDetail(product.productId)"
                  >
                    <div class="h-150px overflow-hidden flex items-center justify-center product b-1-[#e5e5e5]">
                      <img
                        :src="baseUrl+'api/public/file/v1/public/get/'+product.productImg"
                        :alt="product.productName"
                        class="max-w-full max-h-full"
                      >
                    </div>
                    <div class="pt-10px">
                      <h4 class="m-0 text-14px text-[#4e596b] whitespace-nowrap overflow-hidden text-ellipsis">{{ product.productName }}</h4>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="mt-30px flex items-center justify-start">
        <img
          src="@/assets/image/payment.png"
          alt="icon"
          class="w-24px h-24px"
        />
        <h2 class="text-[#142d97] ml-5px">需方市场</h2>
      </div>
      <div class="p-20px bg-white rounded-8px mt-10px">
        <el-row :gutter="30">
          <!-- 左侧区域：发布产品按钮 -->
          <el-col :span="5">
            <div class="dem-bg">
              <el-button
                size="large"
                class="publish-btn"
                @click="handlePublish(2)"
              >
                发布需求
              </el-button>
              <img
                src="@/assets/image/dem-cont.png"
                alt="icon"
                class="pro-cont"
              />
            </div>
          </el-col>

          <!-- 右侧区域：需求分类和需求展示 -->
          <el-col :span="19">
            <!-- 需求分类 -->
            <div class="flex justify-between items-center mb-20px">
              <el-tabs
                v-model="requirementTypeId"
                class="custom-tabs"
                @tab-click="requirementTabClick"
              >
                <el-tab-pane
                  v-for="category in purchases"
                  :key="category.typeId"
                  :label="category.typeName"
                  :name="String(category.typeId)"
                ></el-tab-pane>
              </el-tabs>
              <div
                class="text-[#5a6ff4] text-14px font-bold cursor-pointer"
                @click="$router.push('/demand')"
              >更多></div>
            </div>

            <!-- 格子 -->
            <div class="mt-20px">
              <el-row :gutter="20">
                <el-col
                  v-for="product in requirementList"
                  :key="product.requirementId"
                  :span="6"
                  class="mb-10px"
                >
                  <div
                    class="product"
                    @click="goToDemandDetail(product.requirementId)"
                  >
                    <div class="demand-info h-120px overflow-hidden mb-10px">
                      <h4 class="text-14px text-[#142d97] whitespace-nowrap overflow-hidden text-ellipsis">{{ product.requirement }}</h4>
                      <p class="ml-20px text-14px text-[#4e596b] whitespace-nowrap overflow-hidden text-ellipsis">所属地区：{{ product.areaName }}</p>
                      <p class="ml-20px text-14px text-[#4e596b] whitespace-nowrap overflow-hidden text-ellipsis">预算：{{ product.budget ? `${product.budget}元` : '需服务商报价' }}</p>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { getProductList, getRequirementList } from "../api/home";
export default {
  name: "Home",
  data() {
    return {
      searchKeyword: "",
      productIndustryId: "",
      requirementTypeId: "",
      // 轮播图数据
      bannerList: ["@/assets/image/banner1.png", "@/assets/image/banner2.png"],
      productList: [],
      requirementList: [],
      industrys: [],
      purchases: [],
      productTotal: 0,
      requirementTotal: 0,
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  computed: {
    ...mapGetters("user", ["isLoggedIn", "userInfo"]),
  },
  mounted() {
    this.$store
      .dispatch("dicts/getDictByParams", { parentId: 1 })
      .then((data) => {
        this.industrys = data;
      });
    this.$store.dispatch("dicts/getCityDict");
    this.$store.dispatch("dicts/getDictByParams", { parentId: 2 });
    this.$store.dispatch("dicts/getDictByParams", { parentId: 3 });
    this.$store
      .dispatch("dicts/getDictByParams", { parentId: 4 })
      .then((data) => {
        this.purchases = data;
      });
    this.getProductData();
    this.getRequirementData();
  },
  methods: {
    getProductData() {
      const params = {
        isAsc: true,
        pageNo: 1,
        pageNum: 8,
      };
      if (this.productIndustryId != 0) {
        params.productIndustryId = this.productIndustryId;
      }
      getProductList(params).then((res) => {
        this.productList = res.rows;
        this.productTotal = res.total;
      });
    },
    getRequirementData() {
      const params = {
        isAsc: true,
        pageNo: 1,
        pageNum: 8,
      };
      if (this.requirementTypeId != 0) {
        params.requirementTypeId = this.requirementTypeId;
      }

      getRequirementList(params).then((res) => {
        this.requirementList = res.rows;
        this.requirementTotal = res.total;
      });
    },
    onGo(i) {
      let name = "";
      if (i === 1) {
        // 跳转到产品页面
        name = "supplierMarket";
      } else if (i === 2) {
        // 跳转到需求页面
        name = "demandMarket";
      }
      this.$router.push({
        name: name,
      });
    },
    handleSearch() {
      if (this.searchKeyword.trim()) {
        // 执行搜索逻辑
        console.log("搜索关键词:", this.searchKeyword);
        // 可以跳转到搜索结果页面或调用搜索API
        // 示例: this.$router.push(`/search?q=${this.searchKeyword}`)
      }
    },
    handlePublish(i) {
      if (this.isLoggedIn) {
        let activeMenu = "";
        if (this.userInfo.companyId) {
          if (i === 1) {
            // 跳转到发布产品页面
            activeMenu = "productManage";
          } else if (i === 2) {
            // 跳转到发布需求页面
            activeMenu = "requirementManage";
          }
        } else {
          //企业未绑定
          activeMenu = "personalCenter";
        }
        this.$router.push({
          name: "center",
          query: { activeMenu: activeMenu },
        });
      } else {
        // 可以添加提示信息
        this.$message.warning("请先登录后再进行发布");
      }
    },
    industryTabClick(tab) {
      this.productIndustryId = tab.name;
      this.getProductData();
    },
    requirementTabClick(tab) {
      this.requirementTypeId = tab.name;
      this.getRequirementData();
    },
    goToProductDetail(id) {
      this.$router.push({
        name: "supplierMarketDetail",
        query: { id: id },
      });
    },
    goToDemandDetail(id) {
      this.$router.push({
        name: "demandMarketDetail",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style scoped>
.home {
  min-height: calc(100vh - 120px);
}

.banner-box {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  margin: 0 auto;
  position: absolute;
  top: 120px;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 9;
}
.banner-search {
  width: 300px;
  align-self: self-end;
  padding-top: 20px;
}
.banner-image1 {
  width: 100%;
  height: 280px;
  background-image: url("/src/assets/image/b1.png");
  background-size: cover;
  background-position: center;
}
.banner-image2 {
  width: 100%;
  height: 280px;
  background-image: url("/src/assets/image/b2.jpg");
  background-size: cover;
  background-position: center;
}
.features {
  background-image: url("/src/assets/image/dao-bg.png");
  background-size: cover;
}
.pro-bg {
  background: url("/src/assets/image/pro-bg.png") no-repeat;
  background-size: cover;
  height: 420px;
  position: relative;
}
.dem-bg {
  background: url("/src/assets/image/dem-bg.png") no-repeat;
  background-size: cover;
  height: 320px;
  position: relative;
}
.pro-cont {
  height: 140px;
  width: 140px;
  position: absolute;
  bottom: 10px;
  right: 5px;
}
.product {
  background-image: url("/src/assets/image/productBg.64a91cea.png");
  background-size: cover;
}
.tab-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 16px;
  color: #4e596b;
  position: relative;
  margin-right: 30px;
  font-weight: bold;
}

.tab-item:hover {
  color: #142d97;
}

.tab-item.active {
  color: #142d97;
  font-weight: 500;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #ffd700; /* 黄色下划线 */
  color: #142d97;
}

.publish-btn {
  min-width: 150px;
  /* 天蓝色渐变 */
  background: linear-gradient(135deg, #596df4 0%, #87b1e9 100%) !important;
  font-size: 20px !important;
  padding: 12px 30px !important;
  border-radius: 8px !important;
  color: white !important;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 1px solid rgba(89, 109, 244, 1) !important;
  margin-top: 0;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.publish-btn:hover {
  background: linear-gradient(135deg, #596df4 0%, #87b1e9 100%) !important;
  box-shadow: 0 6px 20px rgba(0, 114, 255, 0.6);
}

.publish-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 114, 255, 0.4);
}

.publish-btn:focus {
  outline: none;
}
.demand-info h4 {
  margin: 30px 20px 10px 20px;
}
.custom-tabs {
  flex: 1;
  margin-right: 20px;
}

.custom-tabs :deep(.el-tabs__header) {
  margin-bottom: 0;
}

.custom-tabs :deep(.el-tabs__nav-wrap::after) {
  display: none;
}

.custom-tabs :deep(.el-tabs__item) {
  font-size: 16px;
  color: #4e596b;
  font-weight: bold;
  padding: 0 16px;
  height: 40px;
  line-height: 40px;
  border: none !important; /* 去掉边框 */
  background: none !important; /* 去掉背景 */
}

.custom-tabs :deep(.el-tabs__item:hover) {
  color: #142d97;
}

.custom-tabs :deep(.el-tabs__item.is-active) {
  color: #142d97;
}

.custom-tabs :deep(.el-tabs__active-bar) {
  background-color: #ffd700;
  height: 3px;
}

.custom-tabs :deep(.el-tabs__nav-scroll) {
  overflow-x: auto;
}

.custom-tabs :deep(.el-tabs__nav) {
  white-space: nowrap;
}
</style>